import Taro from '@tarojs/taro'
import { useEffect, useState } from 'react'
import { AtNavBar } from 'taro-ui'
import './index.scss' // module

export default function NavCustomBar() {
  const [navHeight, setNavHeight] = useState(0) //总高度
  const [statusHeight, setStatusHeight] = useState(0) //状态栏高度

  const getNavHeight = () => {
    let menuButtonObject = Taro.getMenuButtonBoundingClientRect() //获取胶囊对象
    let menuButtonHeight = menuButtonObject.height //获取胶囊高度
    let menuButtonTop = menuButtonObject.top //获取胶囊距离顶部高度

    let sysinfo = Taro.getSystemInfoSync() //获取设备系统对象
    let statusBarHeight = sysinfo.statusBarHeight //获取状态栏高度

    let navBarHeight =
      statusBarHeight + menuButtonHeight + (menuButtonTop - statusBarHeight) * 2 //计算总高度

    console.log(statusBarHeight)
    setNavHeight(navBarHeight)
    setStatusHeight(statusBarHeight)

    // 设置状态栏背景颜色为白色，字体颜色为黑色
    Taro.setNavigationBarColor({
      frontColor: '#000000', // 设置状态栏字体颜色为黑色
      backgroundColor: '#ffffff', // 设置状态栏背景颜色为白色
    })
  }

  useEffect(() => {
    getNavHeight()
  }, [])

  return (
    // <div className='navCustomBar' style={{ height: ` ${navHeight}px` }}>
    //   <div className='statusBar' style={{ height: ` ${statusHeight}px` }}></div>
    //   <div className='navBar'></div>
    // </div>
    <AtNavBar
      customStyle={{
        height: `${navHeight}px`,
        backgroundColor: 'rgb(112, 222, 123)',
      }}
      fixed
    >
      <div style={{ height: ` ${statusHeight}px` }}></div>
    </AtNavBar>
  )
}
